Redux Store, Slice & Middleware Explained in React.js (Bengali Guide)

Redux Toolkit ব্যবহার করলে React অ্যাপে state management অনেক সহজ হয়ে যায়। এই অধ্যায়ে আমরা Store, Slice এবং Middleware — এই তিনটি গুরুত্বপূর্ণ Redux concepts একদম সহজভাবে উদাহরণসহ বুঝে নেবো।

🔶 Redux Store কী?

Redux Store হলো একটি বড় Container, যেখানে আপনার অ্যাপের সমস্ত global state রাখা থাকে। Store ছাড়া Redux কাজ করতে পারে না। এটি state এর একটি centralized জায়গা।

📌 Store এর কাজ:

• সমস্ত state এক জায়গায় রাখা
• State update (dispatch), read (getState) হ্যান্ডেল করা
• Middleware চালানো
• Reducers কে combine করে রাখা

📌 Store তৈরির উদাহরণ:

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

const store = configureStore({
    reducer: {
        counter: counterReducer
    }
});

export default store;

🔶 Redux Slice কী?

Redux Slice হলো আপনার Redux state এর একটি অংশ যাকে আমরা “slice” বলি। যেমন User slice, Product slice, Cart slice ইত্যাদি।

Slice এর ভেতরে থাকে:

• initialState → state এর default মান
• reducers → state update করার ফাংশন
• actions → কম্পোনেন্ট থেকে যেগুলো dispatch করা হয়

📌 Slice তৈরির উদাহরণ:

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
    name: "counter",
    initialState: { value: 0 },

    reducers: {
        increment: (state) => {
            state.value += 1;
        },
        decrement: (state) => {
            state.value -= 1;
        },
        incrementByAmount: (state, action) => {
            state.value += action.payload;
        }
    }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

এখানে createSlice() state, reducers, এবং actions — তিনটি জিনিস একসাথে তৈরি করে দেয়।

🔶 Middleware কী?

Middleware হলো এমন একটি লেয়ার যা Redux এর মধ্যে dispatch এবং reducer এর মাঝখানে কাজ করে। এটি state update হওয়ার আগে কিছু অতিরিক্ত কাজ করতে পারে।

📌 Middleware কেন ব্যবহার করা হয়?

• Logging (action track করার জন্য)
• API call করা
• Async action হ্যান্ডেল করা
• Unauthorized user detect করা
• Data filter/validate করা

Redux Toolkit এ সবচেয়ে জনপ্রিয় middleware হলো:

• Redux Thunk – async API call এর জন্য
• Custom Middleware – নিজের মতো logic লিখতে

🔶 Custom Middleware উদাহরণ

একটি simple logger middleware:

const loggerMiddleware = (store) => (next) => (action) => {
    console.log("Action dispatched:", action);
    return next(action);
};

📌 Middleware Store এ যোগ করুন:

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";
import loggerMiddleware from "./loggerMiddleware";

const store = configureStore({
    reducer: {
        counter: counterReducer
    },
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware().concat(loggerMiddleware)
});

export default store;

🔶 Redux Data Flow (Step-by-Step)

1. Component থেকে dispatch করা হয়
2. Middleware action কে intercept করে (যদি থাকে)
3. Reducer state update করে
4. Store নতুন state save করে
5. Component UI automatically update হয়

🔶 Store, Slice & Middleware — এক নজরে

✨ উপসংহার

Redux Toolkit ব্যবহার করলে Store, Slice এবং Middleware খুব সহজভাবে ম্যানেজ করা যায়। এগুলো একত্রে React অ্যাপকে করে তোলে দ্রুত, শক্তিশালী এবং স্কেলেবল।

যদি আপনি বড় স্কেলের অ্যাপ বানাতে চান, Redux Toolkit আপনার জন্য সেরা অপশন।